<template>
  <base-panel
    class="grid-information-dialog"
    id="InspetionHistory"
    v-loading="loading"
    element-loading-text="数据加载中..."
    element-loading-background="rgba(0,0,0,0.8)"
  >
    <div
      slot="header"
      class="header-title"
      @mousedown="mouseDownLeft($event, 'InspetionHistory', 220, 720)"
    >
      {{ "巡查历史" }}
    </div>
    <div slot="main" class="slot-main">
      <div class="flex-end">
        <el-select
          size="mini"
          v-model="year"
          @change="onChangeType"
          class="area-type"
          popper-class="area-popper"
          style="margin-right: 7px"
        >
          <el-option
            v-for="item in yearOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          size="mini"
          v-model="month"
          @change="onChangeType"
          class="area-type"
          popper-class="area-popper"
        >
          <el-option
            v-for="item in monthOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="legends flex-end">
        <div v-for="item in legendData" class="legend">
          <div
            class="icon"
            :style="{
              'background-color': item.color,
              border: item.border
            }"
          ></div>
          <span>{{ item.name }}</span>
        </div>
      </div>
      <el-calendar v-model="calendarValue" :first-day-of-week="7" :selectable="false"
        ><template slot="dateCell" slot-scope="{ date, data }">
          <p :style="{ 'background-color': getColor(data) }">
            {{ getDay(data) }}
          </p></template
        ></el-calendar
      >
    </div>
  </base-panel>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { mouseDownLeft } from "@/assets/modules/utils";
import BasePanel from "./CBase.vue";
import { getXclsRl } from "@/assets/modules/service";

@Component({
  name: "inspetionHistory",
  components: {
    BasePanel
  }
})
export default class extends Vue {
  get projectInfo() {
    return this.$store.getters["videoData/projectInfo"];
  }
  get calendarValue() {
    return this.year + '-' + this.month;
  }
  loading: boolean = false;
  legendData: any[] = [
    { name: "异常", color: "rgb(255 0 39 / 64%)" },
    { name: "未巡查", color: "", border: "1px solid rgb(38 176 255)" },
    { name: "正常", color: "rgb(0 162 255 / 50%)" }
  ];
  yearOptions: any[] = [];
  monthOptions: any[] = [];
  year = new Date().getFullYear();
  month = new Date().getMonth() + 1;
  inspectDays = []; //巡查记录日期
  type = "";
  created() {
    this.getYearOption();
    this.getMonthOption();
    this.getXclsRl();
  }
  mounted() {}
  getMonthOption() {
    this.monthOptions = [];
    for (let month = 1; month < 13; month++) {
      const item = {
        label: month + "月",
        value: month
      };
      this.monthOptions.push(item);
    }
  }
  getDay(data: any) {
    const day = data.day.split("-")[2];
    return day;
  }
  getColor(data: any) {
    let bgColor = "";
    const selDay: any = this.inspectDays.find((item: any) => {
      if (item.xcrq) {
        return item.xcrq.includes(data.day);
      }
      return false;
    });
    if (!selDay) return bgColor;
    switch (selDay.sxtqk) {
      case "1":
        bgColor = "rgb(255 0 39 / 64%)";
        break;
      case "0":
        bgColor = "rgb(0 162 255 / 50%)";
        break;
      default:
        break;
    }
    return bgColor;
  }
  getYearOption() {
    this.yearOptions = [];
    const year = new Date().getFullYear();
    for (let i = year; i >= 2000; i--) {
      const item = {
        label: i + "年",
        value: i
      };
      this.yearOptions.push(item);
    }
  }
  getXclsRl() {
    this.loading = true;
    const data: any = {
      month: this.month,
      year: this.year,
      ywid: this.projectInfo.ywid
    };
    getXclsRl(data)
      .then((res: any) => {
        this.inspectDays = res.data;
      })
      .catch(err => {
        console.log(err);
      })
      .finally(() => {
        this.loading = false;
      });
  }
  onChangeType() {
    this.getXclsRl();
  }
  mouseDownLeft(event: any, id: string, sTop: number, sRight: number) {
    mouseDownLeft(event, id, sTop, sRight);
  }
}
</script>

<style lang="scss" scoped>
.grid-information-dialog {
  width: 502px;
  height: 402px;
  background-image: url(../../assets/images/dialogs/tanchuangbeijingkuang-3.png);
  background-size: 100% 100%;
}
.area-type {
  width: 110px;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
}
.legends {
  color: white;
  margin-top: 26px;
  line-height: 12px;
  font-size: 12px;
  .legend {
    display: flex;
    align-items: center;
    margin-right: 16px;
  }
  .icon {
    height: 8px;
    width: 14px;
    margin-right: 6px;
  }
}
</style>
<style lang="scss">
.el-calendar__header {
  display: none;
}
.el-calendar-table .el-calendar-day {
  height: 28px;
  text-align: center;
}
.el-calendar-table thead th,
.el-calendar-day {
  color: #fff;
}
.prev,
.next {
  .el-calendar-day {
    color: #959696;
  }
}
.el-calendar-table .el-calendar-day:hover {
  cursor: pointer;
  background-color: #1d528a;
}
.el-calendar__body {
  background-color: #0b2643;
}
.el-calendar-table td,
.el-calendar-table tr td:first-child,
.el-calendar-table tr:first-child td {
  border: none;
}
.el-calendar-table td.is-selected {
  background-color: #00000000 !important;
}
</style>
